<template>
  <!--订单选择-->
  <a-modal
    title="盘点单明细"
    :visible.sync="materialShow"
    @ok="addPPRelationOk"
    :confirm-loading="confirmLoading"
    @cancel="handleCancel"
    width="80%"
    class="procedure-modal"
  >
    <div class="operation-search">
      <h5>选中数据</h5>
      <ul>
        <li v-for="(item, index) in expandedRow">
          {{ `${index + 1}. ${item.MaterialCode}(${item.MaterialName})` }}
        </li>
      </ul>
    </div>
    <div style="height: 400px">
      <a-table
        :columns="orderColums"
        :row-key="(record) => record.num"
        :data-source="orderList"
        :row-selection="{
          selectedRowKeys: expandedRowKeys,
          selectedRows: expandedRow,
          onChange: onSelectChange,
        }"
        :loading="loading1"
        :pagination="false"
        :scroll="{ x: 700, y: 350 }"
        size="middle"
      >
      </a-table>
    </div>
    <a-pagination
      show-size-changer
      :default-current="1"
      :pageSizeOptions="pageSizeOptions"
      :total="orderListTotal"
      :pageSize="searchItem.pageRequestModel.pageSize"
      @change="procedureChange"
      @showSizeChange="onShowSizeChange"
    />
  </a-modal>
</template>

<script>
import { debounce } from "@/common/debounce";
import { getMaterialList, insInventoryCode } from "@/api/InventoryOrder/index";
const orderColums = [
  {
    title: "序号",
    dataIndex: "num",
    fixed: "left",
    width: 50,
    align: "center",
  },
  {
    title: "编码",
    dataIndex: "MaterialCode",
    sorter: true,
    width: "40%",
    align: "center",
  },
  {
    title: "名称",
    dataIndex: "MaterialName",
    align: "center",
    ellipsis: true,
    width: "40%",
  },
];
export default {
  props: {
    materialShow: {
      type: Boolean,
      default: false,
    },
    materialItem: {
      type: Object,
      default: {},
    },
  },
  model: {
    prop: "materialShow",
    event: "close",
  },

  data() {
    return {
      confirmLoading: false, //modal的loading
      defaulttimeList: [], //默认时间
      expandedRowKeys: [],
      expandedRow: [],
      searchItem: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 30,
        },
      }, //搜索参数
      orderColums,
      orderList: [],
      orderListTotal: 0,
      pageSizeOptions: ["30", "50", "100", "200", "500", "1000"], //分页
      loading1: false,
    };
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      this.expandedRowKeys = selectedRowKeys;
      this.expandedRow = selectedRows;
    },

    //切换页数
    procedureChange(page, pageSize) {
      this.searchItem.pageRequestModel.pageIndex = page;
      this.searchItem.pageRequestModel.pageSize = pageSize;
      this.getMaterialFun();
    },
    //切换条数
    onShowSizeChange(current, size) {
      this.searchItem.pageRequestModel.pageIndex = current;
      this.searchItem.pageRequestModel.pageSize = size;
      this.getMaterialFun();
    },

    //获取单据列表
    getMaterialFun: debounce(async function () {
      let that = this;
      that.loading1 = true;
      that.expandedRowKeys = [];
      that.expandedRow = [];
      that.searchItem.wsType = this.materialItem.WSType;
      that.searchItem.WSSegmentID = this.materialItem.WSSegmentID;
      that.searchItem.InventoryOrderID = this.materialItem.InventoryOrderID;
      let res = await getMaterialList(that.searchItem);
      if (res.Status == 10000) {
        let { pageIndex, pageSize } = that.searchItem.pageRequestModel;
        res.Data.Data.map((item, index) => {
          item.num = (pageIndex - 1) * pageSize + index + 1;
        });
        that.orderList = res.Data.Data;
        that.orderListTotal = res.Data.TotalNumber;
      } else {
        that.$message.error(res.Message);
      }
      that.loading1 = false;
    }),

    //确认
    async addPPRelationOk() {
      if (this.expandedRow.length === 0)
        return this.$message.error("请先选择一项再确认");
      let list = [];
      this.expandedRow.map((item) => {
        list.push({
          inventoryOrderID: this.materialItem.InventoryOrderID,
          materialName: item.MaterialName,
          materialCode: item.MaterialCode,
        });
      });
      let res = await insInventoryCode(list);
      if (res.Status == 10000) {
        this.$emit("upData");
        this.handleCancel();
        this.$message.success("添加成功");
      } else {
        this.$message.error(res.Message);
      }
    },

    //关闭弹窗
    handleCancel() {
      this.expandedRowKeys = [];
      this.expandedRow = [];
      this.$emit("close", false);
    },

    //表格选择
    handleTableChange() {},
  },
  watch: {
    materialShow: {
      handler(newV, oldV) {
        if (newV) {
          this.getMaterialFun();
        }
      },
      immediate: true, // 重点
      deep: true, // 重点
    },
  },
};
</script>

<style lang="less" scoped>
.procedure-modal {
  .title {
    border-bottom: 1px solid #eeeeee;
    padding: 0.625rem 0;
    margin-bottom: 0.625rem;
  }
  .production-reporting {
    border-bottom: 1px solid #eeeeee;
    padding: 0.625rem 0;
    height: 1000px;
    margin-bottom: 0.625rem;
    .name {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
  .table-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .left {
      flex: 1;
    }
    .right {
      flex: 1;
    }
    .center {
      display: flex;
      flex-direction: column;
      margin: 0 1.25rem;
    }
    .search {
      margin: 0.625rem 0;
    }
    .name {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
  .searchrow {
    display: flex;
    justify-content: flex-end;
    padding: 2px;
  }
  .operation-search {
    display: flex;
    border-bottom: 2px solid #f0f2f5;

    flex-direction: column;
    ul {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      overflow: auto;
      height: 6.25rem;
      li {
        background-color: #c1bdbd;
        border-radius: 0.3125rem;
        margin: 0px 0.3125rem 0.3125rem 0px;
        padding: 0.3125rem;
      }
    }
  }
}
/deep/.ant-table-body {
  &::-webkit-scrollbar {
    margin: 0.2rem;
    //整体样式
    height: 0.4125rem;
    width: 0.3rem;
  }

  &::-webkit-scrollbar-thumb {
    //滑动滑块条样式
    border-radius: 0.625rem;
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
    background: #009a9a;
    // background: rgba(2, 35, 60, 1);
  }

  &::-webkit-scrollbar-track {
    //轨道的样式
    -webkit-box-shadow: 0;
    border-radius: 0.625rem;
    background: #ccc;
  }

  &::-webkit-scrollbar-corner {
    background: red;
  }
}
</style>
